<template>
	<div class="container">
		<div class="option">
			生成淘口令生成淘口令工具支持链接生成淘口令，请输入要生成淘口令的网址链接或淘口令，支持批量生成,一行一个链接或者口令
		</div>
		<p class="tip">提示：非淘客链接不支持生成淘口令，仅支持淘客推广链接生成口令</p>
		<div class="textarea">
			<el-input
				v-model="url"
				type="textarea"
				clearable
				placeholder="请输入要生成口令的链接或者口令，如：

第1种：优惠券链接
https://uland.taobao.com/xxxxxx

第2种：s.click链接
https:/s.click.taobao.com/xxxxxx"
			></el-input>
		</div>
		<!--		<div class="title">-->
		<!--			<el-row type="flex" align="middle" :gutter="10">-->
		<!--				<el-col :span="3">-->
		<!--					<span>口令标题:</span>-->
		<!--				</el-col>-->
		<!--				<el-col :span="16">-->
		<!--					<el-input-->
		<!--						v-model="title"-->
		<!--						type="text"-->
		<!--						clearable-->
		<!--						placeholder="淘口令在手淘弹框显示的标题，长度大于5个字符"-->
		<!--					></el-input>-->
		<!--				</el-col>-->
		<!--				<el-col :span="5">-->
		<!--					<el-button type="success" size="small" @click="title = '微笑是美好的一天'">点击选择默认标题</el-button>-->
		<!--				</el-col>-->
		<!--			</el-row>-->
		<!--		</div>-->
		<div class="create">
			<el-row>
				<el-col :span="2">
					<el-button type="primary" @click="createdToken">开始生成</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="success" @click="clearToken()">清空</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="token">
			<el-input type="textarea" v-model="resultToken" placeholder="生成结果"></el-input>
		</div>
		<div class="copy">
			<el-button type="success" v-copy="resultToken">复制淘口令</el-button>
		</div>
		<p class="tip">生成短链：</p>
		<div class="textarea">
			<el-input
				v-model="longUrl"
				type="textarea"
				clearable
				placeholder="请输入要生成短链的链接，如：https://uland.taobao.com/xxxxxx"
			></el-input>
		</div>
		<div class="create">
			<el-row>
				<el-col :span="2">
					<el-button type="primary" @click="createdShort">开始生成</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="success" @click="clearShort()">清空</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="token">
			<el-input type="textarea" v-model="shortUrl" placeholder="生成结果"></el-input>
		</div>
		<div class="copy">
			<el-button type="success" v-copy="shortUrl">复制短链</el-button>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			url: '',
			title: '微笑是美好的一天',
			token: '',
			resultToken: '',
			longUrl: '',
			shortUrl: ''
		};
	},
	methods: {
		createdToken() {
			if (!this.url) {
				this.$message.error('请输入链接');
				return false;
			}
			// 过滤多行回车
			let tokenArr = this.url.split('\n');
			tokenArr = tokenArr.filter(item => {
				if (item) {
					return true;
				} else {
					return false;
				}
			});
			let params = {
				title: 'smile to life',
				urls: tokenArr.join(',')
			};
			this.$service.account.union
				.tkl(params)
				.then(res => {
					this.resultToken = '';
					let arr = res.split(',');
					arr.forEach(item => {
						this.resultToken = this.resultToken + item + '\n';
					});
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		clearToken() {
			this.url = '';
			this.resultToken = '';
		},
		createdShort() {
			if (!this.longUrl) {
				this.$message.error('请输入长链接');
				return false;
			}
			let params = {
				url: this.longUrl
			};
			this.$service.account.union
				.shortUrl(params)
				.then(res => {
					this.shortUrl = res;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		clearShort() {
			this.longUrl = '';
			this.shortUrl = '';
		}
	}
};
</script>

<style scoped>
.container {
	padding: 10px;
	background: #fff;
}
.tip {
	padding: 10px;
	color: red;
	margin-bottom: 10px;
}
.textarea {
	width: 700px;
	margin-bottom: 20px;
}
.title {
	width: 700px;
	padding: 20px 0;
}
.token {
	padding: 20px 0;
	width: 700px;
}
.el-textarea__inner {
	height: 200px;
}
.option {
	padding: 10px;
	background-color: #f7f7f7;
}
</style>
